<template>
	<gracePage headerBG="#FFFFFF" :customHeader="false">
		<view slot="gBody" class="grace-body">
			<form @submit="formSubmit" class="grace-form grace-margin-top">
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">收货人姓名</text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" v-model="name" name="name" placeholder="请填写联系姓名"></input>
					</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">联系电话</text>
					<view class="grace-form-body">
						<input type="number" class="grace-form-input" v-model="mobile" name="mobile" placeholder="请填写联系电话"></input>
					</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">所在地区</text>
					<view class="grace-form-body" @tap="openPicker">
						<input type="text" class="grace-form-input" name="area" :value="area" disabled placeholder="请选择所在地区"></input>
					</view>
				</view>
				<view class="grace-form-item">
					<text class="grace-form-label">详细地址</text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" v-model="address" name="address" placeholder="请填写详细地址"></input>
					</view>
				</view>
				<view style="padding:30rpx 0;">
					<button formType="submit" type="primary" class="grace-button">提交</button>
				</view>
				<graceAddressPicker :show="graceAddressPickerShow" @confirm="pickerConfirm" @close="closePicker" cancelTColor="关闭"></graceAddressPicker>
			</form>
			<fab :topBtn="isTopBtn"></fab>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "@/graceUI/components/gracePage.vue";
import graceAddressPicker from '@/graceUI/components/graceAddressPicker.vue';
import fab from '@/components/fab'
var  graceChecker = require("@/graceUI/jsTools/graceChecker.js");
import { getAuth } from '@/api/user';
import { saveUserAddress,userAddress } from '@/api/address';
export default {
    data() {
    	return {
			graceAddressPickerShow : false,
			area:'',
			isTopBtn:false,
            province:'',
            city:'',
            qu:'',
            userid:'',
            name:'',
            mobile:'',
            address:''
		};
    },
	onPageScroll(e){
		if(e.scrollTop>=400){
			this.isTopBtn=true
		}
		if(e.scrollTop<=100){
			this.isTopBtn=false
		}
	},
    onLoad(e){
        this.userid = e.id;
        if(this.userid){
            userAddress(this.userInfo.username,this.userid).then((res)=>{
                if(res.data.status==1){
                    let datas = res.data.datas;
                    this.name=datas.name;
                    this.mobile =datas.mobile;
                    this.area=[datas.province,datas.city,datas.qu];
                    this.address = datas.address;
                    this.province = datas.province;
                    this.city =datas.city;
                    this.qu =datas.qu;
                }
            })
        }
    },
    computed:{
    	userInfo(){
    		return getAuth();
    	}
    },
	methods:{
		openPicker() {
			this.graceAddressPickerShow = true;
		},
		pickerConfirm : function(e){
			this.area = e.names[0]+' '+e.names[1]+' '+e.names[2];
            this.province = e.names[0];
            this.city = e.names[1];
            this.qu = e.names[2];
			this.closePicker();
		},
		closePicker : function () {
			this.graceAddressPickerShow = false;
		},
		// 表单提交
		formSubmit : function(e){
			var rule = [
				{ name: "name", checkType: "string", checkRule: "1,10", errorMsg: "收货人姓名应为1-20个字符" },
				{ name: "mobile", checkType: "phoneno", checkRule: "", errorMsg: "请正确填写手机号" },
				{ name: "area", checkType: "string", checkRule: "1,100", errorMsg: "请选择所在地区" },
				{ name: "address", checkType: "string", checkRule: "1,100", errorMsg: "请正确填写详细地址" }
			];
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if(checkRes){
                delete formData.area;
                formData.province= this.province;
                formData.city = this.city;
                formData.qu =this.qu;
                formData.username = this.userInfo.username;
                if(this.userid){
                    formData.id=this.userid;
                }
                saveUserAddress(formData).then((res)=>{
                    if(res.data.status==1){
                        uni.navigateBack({
                            delta:1
                        });
                    }
                })
			}else{
				uni.showToast({ title: graceChecker.error, icon: "none" });
			}
		}
	},
	components:{fab,gracePage, graceAddressPicker}
}
</script>
<style lang="scss">
	.grace-form-input,.grace-form-label{
		font-size:28rpx;
	}
	.grace-button{
		background: #fd8197 !important;
		color:#fff !important;
		font-size:28rpx !important;
		border:none !important;
		padding:10rpx 0;
		&:after{
			border:none !important;
		}
	}
</style>